<template>
  <div class="items">
    <div v-for="(item,index) in items" :key="index" :style="{color:item.color}" class="item">
      <div class="point" :style="{background:item.color}" />
      <div v-if="index+1 != items.length" class="line" :style="{background:lineColor(item.color,index)}" />
      <div class="item-right">
        <div class="content">{{ item.content }}</div>
        <div class="time">{{ item.time }}</div>
        <div class="person">{{ item.person }}</div>
      </div>

    </div>
  </div>
</template>
<script>
export default {
  props: {
    items: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
    //   items: [
    //     {
    //       content: '提交审批',
    //       person: '李小明',
    //       time: '2020-03-26 12:30',
    //       color: 'green'
    //     },
    //     {
    //       content: '财务审批',
    //       person: '张文强',
    //       time: '2020-03-26 13:30',
    //       color: 'green'
    //     },
    //     {
    //       content: '待调度审核',
    //       person: '陈璐',
    //       time: '2020-03-26 18:30'
    //     },
    //     {
    //       content: '已审核',
    //       person: '成雪',
    //       time: '2020-03-27 13:30'
    //     }
    //   ]
    }
  },
  created() {

  },
  methods: {
    lineColor(color, index) {
      let i
      this.items.forEach((item, j) => {
        if (item.color) {
          i = j
        }
      })
      if (color && i !== index) {
        return color
      }
    }
  }
}
</script>
<style scoped>
       *{
			margin: 0;
			padding: 0;
		}
		.items{
			margin: 50px;
		}
		.item{
			font-size: 13px;
			color: #666;
			display: flex;
			align-content: center;
			position: relative;
			height: 86px;
		}
		.point{
			width:12px ;
			height: 12px;
			background: #e4e7ed;
			border-radius: 50%;
		}
		.line{
			position: absolute;
			left: 5px;
			top: 12px;
			width: 2px;
			height: 75px;
			background: #e4e7ed;
		}
		.item-right{
			margin-left: 14px;
			margin-top: -2px;
		}
</style>
